.directory-tree {
	margin-bottom: 20px;
}
.directory-tree-content {
	background-color: var(--jj-directory-tree-bg);
	border-radius: 4px;
	overflow: hidden;
	padding-bottom: 12px;
}
.directory-tree-head {
	padding: 0 20px;
	margin-bottom: 8px;
}
.directory-tree-title {
	padding: 16px 0;
	font-size: 16px;
	font-weight: none;
	line-height: 24px;
	color: var(--jj-directory-tree-title);
	border-bottom: 1px solid var(--jj-directory-tree-title-border);
}
.directory-tree-body {
	// max-height: 460px;
	min-height: 38px;
	max-height: calc(100vh - 234px);
	overflow: auto;
	margin-right: 4px;
	position: relative;
	// 谷歌浏览器
	&::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: var(--jj-directory-tree-body-scroll);
	}
	// 火狐浏览器
	@supports (scrollbar-width: thin) {
		// scrollbar-width: thin; // Firefox 显示有问题
		scrollbar-color: var(--jj-directory-tree-body-scroll) transparent;
		.directory-tree-list-item-container {
			padding-right: 16px;
		}
	}
}
.directory-tree-list {
	padding: 0;
	margin: 0;
	list-style: none;
}
.directory-tree-list-item {
	font-size: 14px;
	line-height: 22px;
	color: var(--jj-directory-tree-item1);
	&.depth-1 {
		color: var(--jj-directory-tree-item1);
	}
	&.depth-2 {
		color: var(--jj-directory-tree-item2);
		> .directory-tree-list-item-link-wrapper {
			padding-left: 26px;
		}
		> .directory-tree-list-item-link-wrapper .directory-tree-list-item-link {
			padding-top: 2px;
			padding-bottom: 2px;
		}
	}
	&.depth-3 {
		color: var(--jj-directory-tree-item3);
		> .directory-tree-list-item-link-wrapper {
			padding-left: 41px;
		}
		> .directory-tree-list-item-link-wrapper .directory-tree-list-item-link {
			padding-top: 2px;
			padding-bottom: 2px;
		}
	}
}
.directory-tree-list-item.active {
	& > .directory-tree-list-item-link-wrapper {
		color: var(--jj-directory-tree-item-active);
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -8px;
			width: 4px;
			height: 16px;
			background-color: var(--jj-directory-tree-item-active);
			border-radius: 0 4px 4px 0;
		}
	}
}
.directory-tree-list-item-link-wrapper {
	padding-left: 11px;
	@include no-select();
	position: relative;
	cursor: pointer;
	&:hover > .directory-tree-list-item-link {
		background-color: var(--jj-directory-tree-list-item-link-bg-hover);
	}
}
.directory-tree-list-item-link {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 4px 8px;
	border-radius: 4px;
	margin-right: 8px;
	@include one-line();
}
.directory-tree-list-empty {
	padding: 10px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--jj-directory-tree-list-empty);
}
